import React, { useState } from "react";
import {
  Box,
  Container,
  Typography,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Chip,
  createTheme,
  ThemeProvider,
  CssBaseline,
} from '@mui/material';

import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
import VisibilityIcon from '@mui/icons-material/Visibility';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { useNavigate } from 'react-router-dom';
import CreateModelDialog from "../components/CreateModelDialog";

// 模拟数据
const models = [
  {
    name: '国家标准数字化转型成熟度模型 v1.0',
    org: '中国信通院',
    date: '2023-06-01',
    status: '启用',
    desc: '描述、适用范围、评估方法...',
  },
  {
    name: '制造业数字化能力评估模型',
    org: '工信部',
    date: '2023-03-15',
    status: '启用',
    desc: '制造业特定评估标准与方法...',
  },
  {
    name: '金融行业数字化转型评估标准',
    org: '银保监会',
    date: '2022-11-20',
    status: '停用',
    desc: '金融机构数字化评估规范...',
  },
];

// 深色主题定义
const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    background: {
      default: '#0a192f', // 深蓝背景
      paper: '#112240',
    },
    primary: {
      main: '#2196f3',
    },
    success: {
      main: '#00c853',
    },
    error: {
      main: '#f44336',
    },
    warning: {
      main: '#ff9800',
    },
    secondary: {
      main: '#9c27b0',
    },
  },
  typography: {
    fontFamily: 'system-ui',
    fontSize: 14,
  },
});

const ModelManagementPage = () => {
   const [openCreate, setOpenCreate] = useState(false);
  const navigate=useNavigate()
  const enterModelControl=()=>{
    navigate("/modelVersionControl")
  }

  const enterCreateModel=()=>
  {
    setOpenCreate(true)
  }
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <Box
        sx={{
          minHeight: '100vh',
          backgroundImage: `linear-gradient(rgba(10,25,47,0.95), rgba(10,25,47,0.95)), 
            repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.05) 40px),
            repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.05) 40px)`,
          backgroundSize: '40px 40px',
          p: 4,
        }}
      >
        <CreateModelDialog
        open={openCreate}
        onClose={() => setOpenCreate(false)}
        onSuccess={() => {
          // 刷新模型列表等
        }}
      />
        <Container maxWidth="lg">
          <Typography variant="h5" gutterBottom color="white">
            模型管理
          </Typography>

          {/* 工具栏 */}
          <Box display="flex" gap={2} flexWrap="wrap" mb={3}>
            <TextField
              label="搜索模型名称、发布组织..."
              variant="outlined"
              size="small"
              fullWidth
              sx={{
                input: { color: 'white' },
                label: { color: 'gray' },
              }}
            />
            <FormControl size="small" sx={{ minWidth: 120 }}>
              <InputLabel sx={{ color: 'gray' }}>模型类型</InputLabel>
              <Select label="模型类型" defaultValue="">
                <MenuItem value="">全部</MenuItem>
                <MenuItem value="type1">类型1</MenuItem>
                <MenuItem value="type2">类型2</MenuItem>
              </Select>
            </FormControl>
            <FormControl size="small" sx={{ minWidth: 120 }}>
              <InputLabel sx={{ color: 'gray' }}>状态</InputLabel>
              <Select label="状态" defaultValue="">
                <MenuItem value="">全部</MenuItem>
                <MenuItem value="启用">启用</MenuItem>
                <MenuItem value="停用">停用</MenuItem>
              </Select>
            </FormControl>
            <Button
              variant="contained"
              startIcon={<AddIcon />}
              sx={{ borderRadius: 2 }}
              onClick={enterCreateModel}
            >
              新增模型
            </Button>
          </Box>

          {/* 表格 */}
          <TableContainer
            component={Paper}
            sx={{
              backgroundColor: 'rgba(255,255,255,0.02)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 2,
            }}
          >
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell sx={{ color: '#90caf9' }}>模型名称</TableCell>
                  <TableCell sx={{ color: '#90caf9' }}>发布组织</TableCell>
                  <TableCell sx={{ color: '#90caf9' }}>发布时间</TableCell>
                  <TableCell sx={{ color: '#90caf9' }}>状态</TableCell>
                  <TableCell sx={{ color: '#90caf9' }}>评价使用说明</TableCell>
                  <TableCell sx={{ color: '#90caf9' }}>操作</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {models.map((row) => (
                  <TableRow key={row.name}>
                    <TableCell sx={{ color: 'white' }}>{row.name}</TableCell>
                    <TableCell sx={{ color: 'white' }}>{row.org}</TableCell>
                    <TableCell sx={{ color: 'white' }}>{row.date}</TableCell>
                    <TableCell>
                      <Chip
                        label={row.status}
                        color={row.status === '启用' ? 'success' : 'error'}
                        size="small"
                      />
                    </TableCell>
                    <TableCell sx={{ color: 'gray' }}>{row.desc}</TableCell>
                    <TableCell>
                      <IconButton color="primary">
                        <EditIcon onClick={enterModelControl}/>
                      </IconButton>
                      <IconButton color="warning">
                        <PowerSettingsNewIcon />
                      </IconButton>
                      <IconButton color="secondary">
                        <VisibilityIcon />
                      </IconButton>
                      {row.status === '停用' && (
                        <IconButton color="success">
                          <PlayArrowIcon />
                        </IconButton>
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </Container>
      </Box>
    </ThemeProvider>
  );
};

export default ModelManagementPage;
